<template>
	<view class="flow-path uu-zjlc-top">
		
		<view class="path-block ">
			<view class="title">
				<image v-if="appType == 1" src="../../static/images/icon/sanjiaoxing1.png" class="above-pic"></image>
				<image v-else-if="appType == 2" src="../../static/images/icon/sanjiaoxing2.png" class="above-pic"></image>
				<image v-else src="../../static/images/icon/sanjiaoxing.png" class="above-pic"></image>
				<view class="title-text">租赁流程</view>
			</view>
			
			<view class="flow-chart">
				<view class="item step-bg">
					<view class="pic">
						<image v-if="appType == 1" src="../../static/images/ic-flow11.png"></image>
						<image v-else-if="appType == 2" src="../../static/images/ic-flow111.png"></image>
						<image v-else src="../../static/images/ic-flow1.png"></image>
					</view>
					<view class="text">选择商品 确认规格</view>
				</view>
				<view class="dots">
					<view class="dot" v-for="item in 4"></view>
				</view>
				<view class="item step-bg">
					<view class="pic">
						<image v-if="appType == 1" src="../../static/images/ic-flow22.png"></image>
						<image v-else-if="appType == 2" src="../../static/images/ic-flow222.png"></image>
						<image v-else src="../../static/images/ic-flow2.png"></image>
					</view>
					<view class="text">减免押金 订单审核</view>
				</view>
				<view class="dots">
					<view class="dot" v-for="item in 4"></view>
				</view>
				<view class="item step-bg">
					<view class="pic">
						<image v-if="appType == 1" src="../../static/images/ic-flow33.png"></image>
						<image v-else-if="appType == 2" src="../../static/images/ic-flow333.png"></image>
						<image v-else src="../../static/images/ic-flow3.png"></image>
					</view>
					<view class="text">商家发货 用户收货</view>
				</view>
				<view class="dots">
					<view class="dot" v-for="item in 4"></view>
				</view>
				<view class="item step-bg">
					<view class="pic">
						<image v-if="appType == 1" src="../../static/images/ic-flow44.png"></image>
						<image v-else-if="appType == 2" src="../../static/images/ic-flow444.png"></image>
						<image v-else src="../../static/images/ic-flow4.png"></image>
					</view>
					<view class="text">租赁中 按期归还</view>
				</view>
			</view>
			
			<view class="section-box">
				<view class="count-header">
					<image src="../../static/images/icon/count.png" class="count-pic"></image>
					<view class="count-text">租期计算</view>
				</view>
				<view class="s-item" style="margin-top: 0;">
					<view class="content">租期是从用户签收日次日起计算（正常是快递到货次日，由于用户原因延误签收时间，延误时间计入租期内）。例如：用户您选择的租期是 3号到9号（计费时间为7天），但4号快递才送到货给您签收，则从5号开始起算租期，到期后可对应顺延2天在归还寄回（寄回快递费用户自费），寄回时间以快递显示的收揽时间为准。 </view>
				</view>	
				
				<image v-if="appType == 0" src="https://wap.yqjy8.vip/uploads/attach/2023/05/20230520/136da723308e57e2acec2938ed03021c.png" class="date-pic"></image>
				<image v-else-if="appType == 1" src="https://oss.jingyinmao.cn/attach/2023/07/f2309202307071359571178.png" class="date-pic"></image>
				<image v-else-if="appType == 2" src="https://oss.jingyinmao.cn/attach/2023/07/ca316202307261659098599.png" class="date-pic"></image>
			</view>
			<u-divider :dashed="true"></u-divider>
			<view class="s-item">
				<view class="title">
					<image v-if="appType == 1" src="../../static/images/icon/sanjiaoxing1.png" class="above-pic"></image>
					<image v-else-if="appType == 2" src="../../static/images/icon/sanjiaoxing2.png" class="above-pic"></image>
					<image v-else src="../../static/images/icon/sanjiaoxing.png" class="above-pic"></image>
					<view class="title-text">关于审核</view>
				</view>
				<view class="content">下单成功后请您耐心等待，48小时内通过电话、短信、服务提醒等反馈审核结果。如果审核不通过，订单将自动关闭，具体审核结果会及时通知您，请保持手机畅通。</view>
			</view>
			<view class="s-item">
				<view class="title">
					<image v-if="appType == 1" src="../../static/images/icon/sanjiaoxing1.png" class="above-pic"></image>
					<image v-else-if="appType == 2" src="../../static/images/icon/sanjiaoxing2.png" class="above-pic"></image>
					<image v-else src="../../static/images/icon/sanjiaoxing.png" class="above-pic"></image>
					<view class="title-text">关于交租</view>
				</view>
				<view class="content">短租订单（90天或以下）：商家发货前会根据审核结果对用户的订单进行租金扣款（原则上支持商家一次性扣全款），若商家依据风险控制系统判定用户的风险系数较高时，商家可能需要用户预付多期租金，如用户不同意，商家可直接取消订单，并原路退还用户支付的租金（如有）。</view>
				<view class="content">长租订单（90天以上）：商家发货前会根据审核结果对用户的订单进行租金扣款（首期租金扣款），租期内按月扣去每期租金；若商家依据风险控制系统判定用户的风险系数较高时，商家可能需要用户预付多期租金，如用户不同意，商家可直接取消订单，并原路退还用户支付的租金（如有）。</view>
			</view>
			
			<view class="s-item">
				<view class="title">
					<image v-if="appType == 1" src="../../static/images/icon/sanjiaoxing1.png" class="above-pic"></image>
					<image v-else-if="appType == 2" src="../../static/images/icon/sanjiaoxing2.png" class="above-pic"></image>
					<image v-else src="../../static/images/icon/sanjiaoxing.png" class="above-pic"></image>
					<view class="title-text">关于拒签</view>
				</view>
				<view class="content">起租日前到货的订单用户签收时，发现商品存在质量问题、商品与订单规格描述或商家约定的描述不一致可拒签快递，可联系商家客服申请换货或申请退款，并由商家承担往返运费；因用户自身原因拒签的，用户需自行承担往返运费；起租日后到货的订单用户签收时，用户可以拒签快递，由商家承担往返运费；
				</view>
				<view class="content"><text style="font-weight: bold;">温馨提醒：</text>若商品出现以下情形不支持拒签，用户需与商家协商处理：（1）全新商品被拆封或激活或其他行为影响商品二次出售的；（2）定制产品。</view>
			</view>
		</view>
	</view>
	
</template>

<script>
	let app = getApp();
	export default {
		data() {
			return {
				appType: app.globalData.appType,
			}
		}
	}
</script>

<style lang="scss">
	
	page {
		background: #ffffff;
	}
	
	.flow-path {
		background-image: url('https://wap.yqjy8.vip/uploads/attach/2023/05/20230520/a91e10d0623bb8caba5013988172fe93.png');
		background-size: 100%;
		background-color: #FFFFFF;
		background-repeat: no-repeat;
		padding-top: 168rpx;
		padding-bottom: 100rpx;
		
		
		.path-block {
			margin: 0 24rpx;
			padding: 32rpx 24rpx 0 24rpx;
			border-radius: 16rpx 16rpx 0rpx 0rpx;
			background-color: #fff;
			
			.title {
				// display: flex;
				position: relative;
				margin-bottom: 24rpx;
				
				.above-pic {
					position: absolute;
					left: 0;
					top: 0;
					width: 88rpx;
					height: 33rpx;
				}
				
				.title-text {
					position: relative;
					padding-left: 28rpx;
					font-size: 32rpx;
					font-weight: bold;
					color: #1F1F1F;
					line-height: 33rpx;
					// background: linear-gradient(90deg, #E8F9F7 0%, rgba(57,204,194,0) 100%);
				}
			}
				
			.flow-chart {
				display: flex;
				justify-content: space-between;
				
				.item{
					width: 110rpx;
					text-align: center;
					
					
					.pic{
						width: 80rpx;
						height: 80rpx;
						margin: 0 auto;
						
						image {
							width: 100%;
							height: 100%;
						}
					}
					
					.text {
						margin-top: 8rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: #666666;
						line-height: 32rpx;
					}
				}
				
				.dots {
					display: flex;
					justify-content: space-between;
					width: 40rpx;
					margin-top: 40rpx;
					
					.dot {
						width: 4rpx;
						height: 4rpx;
						background: #D8D8D8;
						border-radius: 50%;
					}
				}
				
			}
			
			.section-box {
				margin-top: 24rpx;
				margin-bottom: 48rpx;
				padding: 24rpx;
				background: #F5F7FA;
				border-radius: 8rpx;
				
				.count-header {
					display: flex;
					align-items: center;
					
					.count-pic {
						width: 26rpx;
						height: 28rpx;
						margin-right: 8rpx;
					}
					
					.count-text {
						font-size: 28rpx;
						font-weight: bold;
						color: #1F1F1F;
						line-height: 28rpx;
					}
					
				}
				
				.content {
					padding: 16rpx 0 24rpx 0;
				}
				
				.date-pic {
					width: 606rpx;
					height: 288rpx;
				}
			}
		}
		
		.s-item {
			margin-top: 48rpx;
			
			.content {
				font-size: 24rpx;
				font-weight: 400;
				color: #666666;
				line-height: 44rpx;
				
				&~.content {
					margin-top: 16rpx;
				}
			}
		}
		
	}
	
</style>